<template>
  <!-- 综艺剧集 -->
  <div class="itemList">
    <template v-for="(item,index) in dataList">
      <div :class="size=='width'?'item_li':'item_he'" :key="index" :style="{boxShadow:active==index?'rgba(202,38,250,0.8) 0px 0px 10px 5px':''}"
        @click="hanldClick(index)">
        <div>{{item.title}}</div>
      </div>
    </template>
  </div>
</template>

<script>
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  components: {},
  props: {
    size:{
      type:String,
      default:'width'
    },
    itemList:{
      type:Array,
      default:() =>[]
    }
  },
  data () {
    return {
      active: 0
    }
  },
  computed: {
    dataList(){
      this.itemList.forEach(element => {
        element.title = getSubStr(element.title,33,true)
      });
      return this.itemList
    }
  },
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    hanldClick(val){
      this.active = val;
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.itemList {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .item_li{
    width: 355px;
    height: 45px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: rgba(23, 16, 50, 0.7);
  }
  .item_he{
    position: relative;
    top: -200px;
    left: 350px;
    width: 380px;
    height: 45px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: rgba(23, 16, 50, 0.7);
  }
}
</style>